<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青龙小助手</title>
    <!-- 引入 Element UI 的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--引入axios.js-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 Element UI 的组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }

        #app {
            background: white;
            padding: 20px;
            border-radius: 8px;
            width: 450px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .el-form-item {
            margin-bottom: 20px;
            width: 350px;

        }
    </style>
</head>


<html>
<div id="app">
    <h2><a href="http://t.csdnimg.cn/Vt90f" target="_blank">手动获取京东cookie教程</a></h2>
    <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="cookie值(三天失效)" prop="value">
            <el-input v-model="form.value"></el-input>
        </el-form-item>
        <el-form-item label="备注(可填可不填)" prop="remarks">
            <el-input v-model="form.remarks"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="button" @click="submitForm('form')">提交</el-button>
        </el-form-item>
    </el-form>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    name: 'JD_COOKIE',
                    value: '',
                    remarks: ''
                },
                rules: {
                    value: [
                        {required: true, message: '环境变量值不能为空', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 表单验证成功后发送请求
                        axios.post('http://192.168.100.198:8080/qinglong/addEnvironment', this.form)
                            .then(response => {
                                alert(response.data.message);
                            })
                            .catch(error => {
                                alert(response.data.message)
                            });
                    } else {
                        console.log('表单验证失败!');
                        return false;
                    }
                    this.form.value = '';
                });
            }
        }
    });
</script>
</html>
